<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>order管理</title>
    <link rel="stylesheet" href="/myplugs/css/portal.css">
    <link rel="stylesheet" href="/myplugs/css/mycss.css">
    <link rel="stylesheet" href="/myplugs/css/floating_window.css">
    <script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div class="app-content pt-3 p-md-3 p-lg-4">
    <div class="container-xl">
        <div class="row g-3 mb-4 align-items-center justify-content-between">
            <div class="col-auto">
                <a class="app-page-title mb-0">订单管理</a>
            </div>
            <div class="col-auto">
                <div class="page-utilities">
                    <div class="row g-2 justify-content-start justify-content-md-end align-items-center">
                        <div class="col-auto">
                            <form class="table-search-form row gx-1 align-items-center" action="/selectOrder" method="get">
                                <div class="col-auto">
                                    <input type="text" id="search-userInf" name="search" class="form-control search-orders" placeholder="请输入待搜索内容">
                                </div>
                                <div class="col-auto">
                                    <button type="submit" class="btn app-btn-secondary">搜索</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <nav id="orders-table-tab" class="orders-table-tab app-nav-tabs nav shadow-sm flex-column flex-sm-row mb-4">
            <a class="flex-sm-fill text-sm-center nav-link" id="orders-all-tab" data-bs-toggle="tab" href="/Orders/all" role="tab" aria-controls="orders-all" aria-selected="true">所有</a>
            <a class="flex-sm-fill text-sm-center nav-link"  id="orders-paid-tab" data-bs-toggle="tab" href="/Orders/done" role="tab" aria-controls="orders-paid" aria-selected="false">已发货</a>
            <a class="flex-sm-fill text-sm-center nav-link" id="orders-pending-tab" data-bs-toggle="tab" href="/Orders/undone" role="tab" aria-controls="orders-pending" aria-selected="false">未发货</a>
        </nav>

        <div class="tab-content" id="orders-table-tab-content">
            <div class="tab-pane fade show active" id="orders-all" role="tabpanel" aria-labelledby="orders-all-tab">
                <div class="app-card app-card-orders-table shadow-sm mb-5">
                    <div class="app-card-body">
                        <div class="table-responsive">
                            <table class="table app-table-hover mb-0 text-left">
                                <thead>
                                <tr>
                                    <th class="cell">orderId</th>
                                    <!--                                    <th class="cell">密码</th>-->
                                    <th class="cell">userId</th>
                                    <th class="cell">orderDate</th>
                                    <th class="cell">status</th>
                                    <th class="cell"></th>
                                    <th class="cell"></th>
                                    <th class="cell"></th>
                                    <th class="cell"></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="order:${order}">
                                    <td class="cell" th:text="${order.orderId}" id="thisOrderId"></td>
                                    <td class="cell" th:text="${order.username}"></td>
                                    <td class="cell" th:text="${order.orderDate}"></td>
                                    <td class="cell" th:text="${order.status}"><span class="badge bg-success"></span></td>
                                    <td class="cell"><a class="btn-sm app-btn-primary shipped">已发货</a></td>
                                    <td class="cell"><a class="btn-sm app-btn-secondary not-shipped">未发货</a></td>
                                    <td class="cell"><a class="btn-sm app-btn-primary delete">删除</a></td>
                                    <td class="cell"><a class="btn-sm app-btn-secondary inf" onclick="showPopup()">编辑信息</a></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
<!--                <nav class="app-pagination">-->
<!--                    <ul class="pagination justify-content-center">-->
<!--                        <li class="page-item disabled">-->
<!--                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>-->
<!--                        </li>-->
<!--                        <li class="page-item active"><a class="page-link" href="#">1</a></li>-->
<!--                        <li class="page-item"><a class="page-link" href="#">2</a></li>-->
<!--                        <li class="page-item"><a class="page-link" href="#">3</a></li>-->
<!--                        <li class="page-item">-->
<!--                            <a class="page-link" href="#">下一页</a>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </nav>-->
            </div>
        </div>
    </div>
</div>


<div class="overlay" id="overlay" style="display: none;"></div>
<form method="post" action="/Orders/updateOrder" >
    <div class="popup row gy-4" id="popup" style="display: none;">
        <div class="app-card-footer p-2-2 mt-auto">
            <a class="my-css-a"><strong>修改订单信息</strong></a>
        </div>
        <div>
            <div>
                <label class="form-label"><strong>orderId</strong></label>
                <input class="form-control" id="orderId" name="orderId" readonly="readonly"/>

                <label class="form-label"><strong>userId</strong></label>
                <input class="form-control" id="userid" name="userid" readonly="readonly"/>
            </div>
            <div>
                <label class="form-label"><strong>orderDate</strong></label>
                <input class="form-control" id="orderDate" name="orderDate" readonly="readonly"/>

                <label class="form-label"><strong>shipAddress1</strong></label>
                <input class="form-control" id="shipAddress1" name="shipAddress1"/>
            </div>
            <div>
                <label class="form-label"><strong>shipAddress2</strong></label>
                <input class="form-control" id="shipAddress2" name="shipAddress2"/>

                <label class="form-label"><strong>shipCity</strong></label>
                <input class="form-control" id="shipCity" name="shipCity"/>
            </div>
            <div>
                <label class="form-label"><strong>shipState</strong></label>
                <input class="form-control" id="shipState" name="shipState"/>

                <label class="form-label"><strong>shipZip</strong></label>
                <input class="form-control" id="shipZip" name="shipZip"/>
            </div>
            <div>
                <label class="form-label"><strong>shipCountry</strong></label>
                <input class="form-control" id="shipCountry" name="shipCountry"/>

                <label class="form-label"><strong>billAddress1</strong></label>
                <input class="form-control" id="billAddress1" name="billAddress1"/>
            </div>
            <div>
                <label class="form-label"><strong>billAddress2</strong></label>
                <input class="form-control" id="billAddress2" name="billAddress2"/>

                <label class="form-label"><strong>billCity</strong></label>
                <input class="form-control" id="billCity" name="billCity"/>
            </div>
            <div>
                <label class="form-label"><strong>billState</strong></label>
                <input class="form-control" id="billState" name="billState"/>

                <label class="form-label"><strong>billZip</strong></label>
                <input class="form-control" id="billZip" name="billZip"/>
            </div>
            <div>
                <label class="form-label"><strong>billCountry</strong></label>
                <input class="form-control" id="billCountry" name="billCountry"/>

                <label class="form-label"><strong>courier</strong></label>
                <input class="form-control" id="courier" name="courier"/>
            </div>
            <div>
                <label class="form-label"><strong>totalPrice</strong></label>
                <input class="form-control" id="totalPrice" name="totalPrice"/>

                <label class="form-label"><strong>creditCard</strong></label>
                <input class="form-control" id="creditCard" name="creditCard"/>
            </div>
            <div>
                <label class="form-label"><strong>shipToFirstName</strong></label>
                <input class="form-control" id="shipToFirstName" name="shipToFirstName"/>

                <label class="form-label"><strong>shipToLastName</strong></label>
                <input class="form-control" id="shipToLastName" name="shipToLastName"/>
            </div>
            <div>
                <label class="form-label"><strong>billToFirstName</strong></label>
                <input class="form-control" id="billToFirstName" name="billToFirstName"/>

                <label class="form-label"><strong>billToLastName</strong></label>
                <input class="form-control" id="billToLastName" name="billToLastName"/>
            </div>
            <div>
                <label class="form-label"><strong>cardType</strong></label>
                <input class="form-control" id="cardType" name="cardType"/>

                <label class="form-label"><strong>expiryDate</strong></label>
                <input class="form-control" id="expiryDate" name="expiryDate"/>
            </div>
            <div>
                <label class="form-label"><strong>locale</strong></label>
                <input class="form-control" id="locale" name="locale"/>

                <label class="form-label"><strong>status</strong></label>
                <input class="form-control" id="status" name="status"/>
            </div>
        </div>
        <span class="my-css-card">
        <div class="app-card-footer p-4 mt-auto">
            <button type="submit" class="btn app-btn-primary" onclick="hidePopup()">保存所有信息</button>
            <button class="btn app-btn-secondary" type="button" onclick="hidePopup()">取消</button>
        </div>
        </span>
    </div>
</form>
<script src="/myplugs/js/order_floating.js"> </script>
<script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>

<script>
    $(".delete").click(function (){
        console.log(1234);
        console.log($(this).parents('tr').children('#orderId').text());
        $.ajax({
            type:"delete",
            url:"/Orders/singleOrder",
            dataType:"json",
            contextType:"application/json;charset=UTF-8",
            data:'orderId='+$(this).parents('tr').children('#thisOrderId').text(),
            success: function (){
            }
        })
        $(this).parent().parent().remove();
    })

    $(".shipped").click(function (){
        console.log(1234);
        console.log($(this).parents('tr').children('#orderId').text());
        $.ajax({
            type:"put",
            url:"/Orders/updateOrderStatusShipped",
            dataType:"json",
            contextType:"application/json;charset=UTF-8",
            data:'orderId='+$(this).parents('tr').children('#thisOrderId').text(),
            success: function (){
                location.reload(true);
            },
            error:function (){
                location.reload(true);
            }
        })
    })

    $(".not-shipped").click(function (){
        console.log(1234);
        console.log($(this).parents('tr').children('#orderId').text());
        $.ajax({
            type:"put",
            url:"/Orders/updateOrderStatus",
            dataType:"json",
            contextType:"application/json;charset=UTF-8",
            data:'orderId='+$(this).parents('tr').children('#thisOrderId').text(),
            success: function (){
                location.reload(true);
            },
            error:function (){
                location.reload(true);
            }
        })
    })
</script>
</body>
</html>